
<template>
  <div style="width: 430px;height: 932px">
    <h2>我的</h2>
    <div class="show1">
      <el-avatar shape="circle" size="large">
        <van-image :src="admin.photo"></van-image>
      </el-avatar>
      <p>{{admin.username}}</p>
      <p>ID: {{admin.id}}</p>
      <p>角色: {{admin.level}}</p>
    </div>
    <div class="show2">
      <div class="my-services">
        <h3>我的服务</h3>
        <el-row>
          <el-col :span="8" v-show="admin.level=='普通用户'">
            <div class="service-item">
              <el-icon name="user"></el-icon>
              <p @click="toweixiu()">维修订单</p>
            </div>
          </el-col>
          <el-col :span="8" v-show="admin.level=='普通用户'">
            <div class="service-item">
              <el-icon name="user"></el-icon>
              <p @click="toshopping()">商城订单</p>
            </div>
          </el-col>
          <el-col :span="8" v-show="admin.level=='普通用户'">
            <div class="service-item">
              <el-icon name="user"></el-icon>
              <p @click="toshenqing()">维修工申请</p>
            </div>
          </el-col>
          <el-col :span="8" v-show="admin.level=='维修工'">
            <div class="service-item">
              <el-icon name="user"></el-icon>
              <p @click="toweixiu()">当前订单</p>
            </div>
          </el-col>
          <el-col :span="8" v-show="admin.level=='维修工'">
            <div class="service-item">
              <el-icon name="user"></el-icon>
              <p @click="toexamine()">审核</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="my-page">
      <el-row style="width: 430px;height: 100px;background-color: antiquewhite">
        <el-col :span="24">
          <el-button type="text" @click="goToRepairReservation" v-show="admin.level=='普通用户'"><h2>我的修车预约</h2></el-button>
          <el-button type="text" @click="toshopping()" v-show="admin.level=='维修工'"><h2>商城订单</h2></el-button>
        </el-col>
      </el-row>
      <el-row style="width: 430px;height: 100px;background-color: antiquewhite">
        <el-col :span="24">
          <el-button type="text" @click="goToAddressManagement"><h2>地址管理</h2></el-button>
        </el-col>
      </el-row>
      <el-row style="width: 430px;height: 100px;background-color: antiquewhite">
        <el-col :span="24">
          <el-button type="text" @click="goToContactUs"><h2>联系我们</h2></el-button>
        </el-col>
      </el-row>
      <el-row style="width: 430px;height: 100px;background-color: antiquewhite">
        <el-col :span="24">
          <el-button type="text" @click="goToAboutUs"><h2>关于我们</h2></el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <van-tabbar v-model="active" class="button">
        <van-tabbar-item name="home" @click="tiaozhuan1" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item name="search" @click="tiaozhuan2" icon="search">商城</van-tabbar-item>
        <van-tabbar-item name="friends" @click="tiaozhuan3" icon="setting-o">购物车</van-tabbar-item>
        <van-tabbar-item name="setting" @click="tiaozhuan4" icon="friends-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>

  </div>
</template>
<script>

export default {
  data () {
    return {
      admin:{},
      active: 'setting',
    }
  },
  methods: {
    toexamine(){
      this.$router.push('/examine')
    },
    toshenqing(){
      this.$router.push('/applyfor')
    },
    toshopping(){
      this.$router.push('/shoppingorder')
    },
    goToRepairReservation() {
      // 这里添加跳转到我的修车预约页面的逻辑
      this.$router.push('/repair')
    },
    goToAddressManagement() {
      // 这里添加跳转到地址管理页面的逻辑
      this.$router.push('/shoppingaddress')
    },
    goToContactUs() {
      // 这里添加跳转到联系我们页面的逻辑
      this.$router.push('/contactwe')
    },
    goToAboutUs() {
      // 这里添加跳转到关于我们页面的逻辑
      this.$router.push('/introduce')
    },
    toweixiu(){
      this.$router.push('/maintanence')
    },
    toshouye(){
      this.$router.push('/')
    },
    towode(){
      this.$router.push('/personal')
    },
    tiaozhuan1() {
      this.$router.push('/shouyei')
    },

    tiaozhuan2() {
      this.$router.push('/Home')
    },
    tiaozhuan3() {
      this.$router.push('/Shoppingcart')
    },
    tiaozhuan4() {
      this.$router.push('/Personal')
    }
  },
  created () {
    this.admin = JSON.parse(localStorage.getItem("admin"))
  }
}
</script>
<style scoped>
.my-services {
        padding: 5px;
      }
.service-item {
             text-align: center;
           }
.show1{
  width: 430px;
  height: 150px;
  background-color: antiquewhite;
}
.show2{
  width: 430px;
  height: 150px;
  background-color: darkturquoise;
}
</style>


